<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文件检测系统</title>
    <style>
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .upload-box {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        .custom-button {
            background-color: #009688;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .custom-button:hover {
            background-color: #009688;
        }

        #fileInput {
            display: none;
        }

        #preview {
            margin-top: 20px;
            min-height: 100px;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #f1f1f1;
            border-radius: 10px;
            margin: 10px 0;
            overflow: hidden;
            display: none;
        }

        .progress {
            width: 0%;
            height: 100%;
            background-color: #009688;
            transition: width 0.3s ease;
        }

        #result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            display: none;
        }

        .success {
            background-color: #dff0d8;
            border: 1px solid #d6e9c6;
            color: #009688;
        }

        .error {
            background-color: #f2dede;
            border: 1px solid #ebccd1;
            color: #a94442;
        }

        .file-info {
            margin: 10px 0;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI检测</h1>
        
        <div class="upload-box">
            <input type="file" id="fileInput" accept=".pdf,.doc,.docx,.txt,.jpg,.png">
            <button onclick="document.getElementById('fileInput').click()" class="custom-button">
                选择检测文件
            </button>
            <p class="file-info" id="fileInfo">支持格式：PDF, Word, TXT, JPG, PNG (最大10MB)</p>
            <div id="preview"></div>
        </div>

        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>

        <button onclick="uploadFile()" class="custom-button" id="uploadButton" disabled>
            开始AI检测
        </button>

        <div id="result"></div>
    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const uploadButton = document.getElementById('uploadButton');
        const preview = document.getElementById('preview');
        const progressBar = document.querySelector('.progress-bar');
        const progress = document.getElementById('progress');
        const resultDiv = document.getElementById('result');
        let selectedFile = null;

        // 文件选择处理
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 文件验证
            const validTypes = ['application/pdf', 
                              'application/msword',
                              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                              'text/plain',
                              'image/jpeg',
                              'image/png'];
            
            if (!validTypes.includes(file.type)) {
                alert('错误：不支持的文件类型！');
                resetForm();
                return;
            }

            if (file.size > 10 * 1024 * 1024) { // 10MB限制
                alert('错误：文件大小超过10MB限制！');
                resetForm();
                return;
            }

            selectedFile = file;
            uploadButton.disabled = false;
            
            // 显示文件信息
            preview.innerHTML = `
                <strong>已选文件：</strong>${file.name}<br>
                <strong>文件类型：</strong>${file.type}<br>
                <strong>文件大小：</strong>${(file.size/1024/1024).toFixed(2)}MB
            `;
        });

        // 上传文件函数
        async function uploadFile() {
            if (!selectedFile) return;

            const formData = new FormData();
            formData.append('file', selectedFile);
            
            try {
                // 显示进度条
                progressBar.style.display = 'block';
                uploadButton.disabled = true;
                
                const response = await fetch('/AI/api/ai-detection', {
                    method: 'POST',
                    body: formData,
                    // 使用上传进度事件（需要服务器支持）
                    /* onUploadProgress: progressEvent => {
                        const percent = Math.round(
                            (progressEvent.loaded / progressEvent.total) * 100
                        );
                        progress.style.width = percent + '%';
                    } */
                });

                const data = await response.json();
                
                if (response.ok) {
                    showResult('success', `
                        <h3>检测结果：安全</h3>
                        <p>${data.message}</p>
                        <p>置信度：${data.confidence}%</p>
                    `);
                } else {
                    showResult('error', `
                        <h3>检测失败：</h3>
                        <p>${data.error || '服务器错误'}</p>
                    `);
                }
            } catch (error) {
                showResult('error', `
                    <h3>请求失败：</h3>
                    <p>${error.message}</p>
                `);
            } finally {
                resetProgress();
            }
        }

        // 显示检测结果
        function showResult(type, content) {
            resultDiv.innerHTML = content;
            resultDiv.className = type;
            resultDiv.style.display = 'block';
        }

        // 重置进度条
        function resetProgress() {
            progress.style.width = '0%';
            progressBar.style.display = 'none';
            uploadButton.disabled = true;
        }

        // 重置表单
        function resetForm() {
            fileInput.value = '';
            selectedFile = null;
            preview.innerHTML = '';
            resultDiv.style.display = 'none';
            uploadButton.disabled = true;
        }
    </script>
</body>
</html>